<!DOCTYPE HTML>
<html lang>
<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="腾宇的个人博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="https://gitee.com/bingtengaoyu/blog">
    <!--SEO-->

    <meta name="keywords" content>


    <meta name="description" content="Vue 优化首次加载过长问题@(作者)[腾宇]

背景：做 Vue 单页面经常遇到的一大问题就是首屏加载太慢，尽管首屏可能只是一个简单的登录页，可是也要下载几百 k 甚至上 m 的整个项目的代码...">



<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">

    <!--Title-->


<title>Vue 优化首次加载过长问题 | 腾宇的个人博客</title>


    <link rel="alternate" href="/atom.xml" title="腾宇的个人博客" type="application/atom+xml">


    <link rel="icon" href="/favicon.ico">

    



<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.5.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">




    
	<div class="hide">
		<script type="text/javascript">
			var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
		</script>
	</div>






    

</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
    <header class="main-header"  style="background-image:url(http://snippet.shenliyang.com/img/banner.jpg)"  >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='耿兵兵'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
        	<!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
                 <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
    	</div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                    <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://gitee.com/bingtengaoyu/blog">腾宇的个人博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog"><i class="fa "></i>Home</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/vuetools/#/"><i class="fa "></i>vue插件</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/reactantd/#/"><i class="fa "></i>reactAnt模板</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="https://bingtengaoyu.gitee.io/home/"><i class="fa "></i>简介</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="http://gank.io/"><i class="fa "></i>工具</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/blog/archives/"><i class="fa "></i>时间轴</a>
                            </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="Vue 优化首次加载过长问题">
            
	            Vue 优化首次加载过长问题
            
        </h1>
        <div class="post-meta">
    
        <span class="categories-meta fa-wrap">
            <i class="fa fa-folder-open-o"></i>
            
        </span>
    

    
        <span class="fa-wrap">
            <i class="fa fa-tags"></i>
            <span class="tags-meta">
                
            </span>
        </span>
    

    
        
        <span class="fa-wrap">
            <i class="fa fa-clock-o"></i>
            <span class="date-meta">2019/07/18</span>
        </span>
        
    
</div>
            
            
    </div>
    
    <div class="post-body post-content">
        <h1 id="Vue-优化首次加载过长问题"><a href="#Vue-优化首次加载过长问题" class="headerlink" title="Vue 优化首次加载过长问题"></a>Vue 优化首次加载过长问题</h1><p>@(作者)[腾宇]</p>
<blockquote>
<p><strong>背景</strong>：做 Vue 单页面经常遇到的一大问题就是首屏加载太慢，尽管首屏可能只是一个简单的登录页，可是也要下载几百 k 甚至上 m 的整个项目的代码。<br>如果优化过后还是慢的话，就加个loading吧<del>~</del></p>
</blockquote>
<h4 id="1-使用-Element-ui-提供的按需加载组件，但是即便如此进步也不大，仍然是几百-k"><a href="#1-使用-Element-ui-提供的按需加载组件，但是即便如此进步也不大，仍然是几百-k" class="headerlink" title="1. 使用 Element-ui 提供的按需加载组件，但是即便如此进步也不大，仍然是几百 k"></a>1. 使用 Element-ui 提供的按需加载组件，但是即便如此进步也不大，仍然是几百 k</h4><h4 id="2-异步路由加载（使用require）"><a href="#2-异步路由加载（使用require）" class="headerlink" title="2.  异步路由加载（使用require）"></a>2.  异步路由加载（使用require）</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Router <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="comment">// 之前的方案</span></span><br><span class="line"><span class="comment">// import Index from '@/pages/index/'</span></span><br><span class="line"><span class="comment">// import ChooseUser from '@/pages/detail/chooseUser'</span></span><br><span class="line"><span class="comment">// 异步加载方案</span></span><br><span class="line"><span class="keyword">const</span> Index = <span class="function"><span class="params">r</span> =&gt;</span></span><br><span class="line">  <span class="built_in">require</span>.ensure([], () =&gt; r(<span class="built_in">require</span>(<span class="string">'@/pages/index'</span>)), <span class="string">'Index'</span>)</span><br><span class="line"><span class="keyword">const</span> ChooseUser = <span class="function"><span class="params">r</span> =&gt;</span></span><br><span class="line">  <span class="built_in">require</span>.ensure([], () =&gt; r(<span class="built_in">require</span>(<span class="string">'@/pages/detail/chooseUser'</span>)),<span class="string">'ChooseUser'</span>)</span><br><span class="line">Vue.use(Router)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Router(&#123;</span><br><span class="line">  <span class="comment">// mode:'history',// 开发阶段开启</span></span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">'/board/index/:id?'</span>,</span><br><span class="line">      name: <span class="string">'Index'</span>,</span><br><span class="line">      component: Index</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">'/board/chooseUser'</span>,</span><br><span class="line">      name: <span class="string">'ChooseUser'</span>,</span><br><span class="line">      component: ChooseUser</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="3-不打包库文件"><a href="#3-不打包库文件" class="headerlink" title="3. 不打包库文件"></a>3. 不打包库文件</h4><ul>
<li><strong>首屏加载慢，主要是打包后的 js 文件过大，阻塞加载所致。那么如何减小 js 的体积呢？</strong></li>
<li><strong>那就是把库文件单独拿出来加载，不要参与打包。</strong></li>
</ul>
<p><strong>index.html</strong></p>
<figure class="highlight vbscript-html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">  &lt;head&gt;</span><br><span class="line">    &lt;meta charset="utf-8"&gt;</span><br><span class="line">    &lt;meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" /&gt;</span><br><span class="line">    &lt;meta http-equiv="Pragma" content="no-cache"&gt;</span><br><span class="line">    &lt;meta http-equiv="Cache-Control" content="no-cache"&gt;</span><br><span class="line">    &lt;meta http-equiv="Expires" content="0"&gt;</span><br><span class="line">    &lt;title&gt;test&lt;/title&gt;</span><br><span class="line">    &lt;link rel="icon" type="image/x-icon" href="/static/favicon.ico" /&gt;</span><br><span class="line">    &lt;link rel="stylesheet" href="/static/common/css/base.css"&gt;</span><br><span class="line">  &lt;/head&gt;</span><br><span class="line">  &lt;body style="margin:0;background:#f2f2f2;"&gt;</span><br><span class="line">  &lt;script src="/static/common/js/polyfill.min.js"&gt;&lt;/script&gt;</span><br><span class="line">  &lt;!--vue--&gt;</span><br><span class="line">  &lt;script src="/static/common/js/vue.min.js"&gt;&lt;/script&gt;</span><br><span class="line">  &lt;!--vue-router--&gt;</span><br><span class="line">  &lt;script src="/static/common/js/vue-router.min.js"&gt;&lt;/script&gt;</span><br><span class="line">  &lt;!--axios--&gt;</span><br><span class="line">  &lt;script src="/static/common/js/axios.min.js"&gt;&lt;/script&gt;</span><br><span class="line">  &lt;!--element-ui--&gt;</span><br><span class="line">  &lt;link href="/static/common/js/element-ui/lib/theme-chalk/index.css" rel="stylesheet"&gt;</span><br><span class="line">  &lt;script src="/static/common/js/element-ui/lib/index.js"&gt;&lt;/script&gt;</span><br><span class="line">  &lt;!--echarts--&gt;</span><br><span class="line">  &lt;script src="/static/common/js/echarts.min.js"&gt;&lt;/script&gt;</span><br><span class="line">    &lt;div id="app"&gt;&lt;/div&gt;</span><br><span class="line">    &lt;!-- built files will be auto injected --&gt;</span><br><span class="line">  &lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<p><strong>webpack.base.conf.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">externals: &#123;</span><br><span class="line">  <span class="string">'element-ui'</span>: <span class="string">'ELEMENT'</span>,</span><br><span class="line">  <span class="string">'vue'</span>: <span class="string">'Vue'</span>,</span><br><span class="line">  <span class="string">'axios'</span>: <span class="string">'axios'</span>,</span><br><span class="line">  <span class="string">'echarts'</span>: <span class="string">'echarts'</span>,</span><br><span class="line">  <span class="string">'vue-router'</span>: <span class="string">'VueRouter'</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>这个键值对大家需要重点关注一下，配置错了这些大文件仍旧参与打包，导致优化失败。</strong></li>
<li><strong>键（key），就是你用 npm install 命令装的插件名称，不确定的话，找一下 package.json 文件对一下。</strong></li>
<li><strong>值（value），就是对外提供的那个对象，这个你得打开库文件看看咯。</strong></li>
<li><strong>main.js 正常引入即可</strong></li>
</ul>
<h4 id="4-关闭-sourcemap"><a href="#4-关闭-sourcemap" class="headerlink" title="4. 关闭 sourcemap"></a>4. 关闭 sourcemap</h4><ul>
<li><strong>sourcemap 是为了方便线上调试用的，因为线上代码都是压缩过的，导致调试极为不便，而有了 sourcemap，就等于加了个索引字典，出了问题可以定位到源代码的位置。</strong></li>
<li><strong>但是，这个玩意是每个 js 都带一个 sourcemap，有时 sourcemap 会很大，拖累了整个项目加载速度，为了节省加载时间，我们将其关闭掉。</strong></li>
</ul>
<p><strong>config/index.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Source Maps</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">productionSourceMap: <span class="literal">false</span>,</span><br></pre></td></tr></table></figure>

<h4 id="5-开启-gzip-压缩"><a href="#5-开启-gzip-压缩" class="headerlink" title="5. 开启 gzip 压缩"></a>5. 开启 gzip 压缩</h4><ul>
<li><strong>这块需要前后台一起进行，前端打包.gz，后端nginx需要配置，浏览器直接解析.gz文件</strong></li>
<li><strong>webpack 的配置</strong></li>
</ul>
<p><strong>config/index.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Gzip off by default as many popular static hosts such as</span></span><br><span class="line"><span class="comment">// Surge or Netlify already gzip all static assets for you.</span></span><br><span class="line"><span class="comment">// Before setting to `true`, make sure to:</span></span><br><span class="line"><span class="comment">// npm install --save-dev compression-webpack-plugin</span></span><br><span class="line">productionGzip: <span class="literal">true</span>,</span><br><span class="line">productionGzipExtensions: [<span class="string">'js'</span>, <span class="string">'css'</span>],</span><br></pre></td></tr></table></figure>

<p><strong>build/webpack.prod.conf.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (config.build.productionGzip) &#123;</span><br><span class="line">  <span class="keyword">const</span> CompressionWebpackPlugin = <span class="built_in">require</span>(<span class="string">'compression-webpack-plugin'</span>)</span><br><span class="line"></span><br><span class="line">  webpackConfig.plugins.push(</span><br><span class="line">    <span class="keyword">new</span> CompressionWebpackPlugin(&#123;</span><br><span class="line">      asset: <span class="string">'[path].gz[query]'</span>,</span><br><span class="line">      algorithm: <span class="string">'gzip'</span>,</span><br><span class="line">      test: <span class="keyword">new</span> <span class="built_in">RegExp</span>(</span><br><span class="line">        <span class="string">'\\.('</span> +</span><br><span class="line">        config.build.productionGzipExtensions.join(<span class="string">'|'</span>) +</span><br><span class="line">        <span class="string">')$'</span></span><br><span class="line">      ),</span><br><span class="line">      threshold: <span class="number">10240</span>,</span><br><span class="line">      minRatio: <span class="number">0.8</span></span><br><span class="line">    &#125;)</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
    </div>
    
    <div class="post-footer">
        <div>
            
                转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
        </div>
        <div>
            
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    
        <a href="/blog/2019/07/20/IE 中屏蔽回退键Backspace/" class="pre-post btn btn-default" title='IE 中屏蔽回退键Backspace'>
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs">IE 中屏蔽回退键Backspace</span>
        </a>
    
    
        <a href="/blog/2019/07/17/Vue 如何禁止弹窗后面的滚动条滚动？/" class="next-post btn btn-default" title='Vue 如何禁止弹窗后面的滚动条滚动？'>
            <span class="hidden-lg">下一篇</span>
            <span class="hidden-xs">Vue 如何禁止弹窗后面的滚动条滚动？</span><i class="fa fa-angle-right fa-fw"></i>
        </a>
    
</div>


    <div id="comments">
        
	
    <div id="vcomments" class="valine"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/blog/assets/valine.min.js"></script>

    <script>
        new Valine({
            av: AV,
            el: '#vcomments',
            appId: 'xOKV9J4UeQAtVkvnJC7Kq2Jn-gzGzoHsz',
            appKey: 'erIpQac4azoCmgfBB7Dl9maa',
            placeholder: '说点什么吧',
            notify: false,
            verify: true,
            avatar: 'mm',
            meta: 'nick,mail'.split(','),
            pageSize: '10',
            path: window.location.pathname,
            lang: ''.toLowerCase()
        })
    </script>


    </div>





                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">Table of Contents</h3>
        
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-优化首次加载过长问题"><span class="toc-text">Vue 优化首次加载过长问题</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-使用-Element-ui-提供的按需加载组件，但是即便如此进步也不大，仍然是几百-k"><span class="toc-text">1. 使用 Element-ui 提供的按需加载组件，但是即便如此进步也不大，仍然是几百 k</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-异步路由加载（使用require）"><span class="toc-text">2.  异步路由加载（使用require）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-不打包库文件"><span class="toc-text">3. 不打包库文件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-关闭-sourcemap"><span class="toc-text">4. 关闭 sourcemap</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-开启-gzip-压缩"><span class="toc-text">5. 开启 gzip 压缩</span></a></li></ol></li></ol></li></ol></li></ol>
        
    </div>
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>

<a id="back-to-top" class="icon-btn hide">
	<i class="fa fa-chevron-up"></i>
</a>




    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>

            </div>
            <div class="col-sm-12">
                <span>Copyright &copy; 2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>







<script src="/blog/js/app.js?rev=@@hash"></script>

</body>
</html>